<template>
    <div class="loginBox">
        <div class="demo-type">
            <el-avatar
                src="https://img1.baidu.com/it/u=525021072,2322313149&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
            />
        </div>
        <el-form
            ref="ruleFormRef"
            :model="userData"
            status-icon
            label-width="120px"
            :rules="rules"
            class="demo-ruleForm"
        >
            <el-form-item label="用户名" prop="username">
                <el-input v-model="userData.username" type="text" />
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input v-model="userData.password" type="password" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="LoginUserGet(ruleFormRef)">登录</el-button>
                <el-button>取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script lang="ts" setup>
//引入公共样式
import '../assets/style/commonStyle.css'
import { ElMessage, FormInstance } from 'element-plus'

import { reactive, ref } from 'vue';

import { useRouter } from 'vue-router'
import { loginUserStore } from '../store/index'
//
import { myaxios } from '../request/index';

//存储数据
const userData = reactive({
    username: 'admin',
    password: '123456'
})
//验证方法
const rules: any = reactive({
    username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 3, max: 6, message: '长度在 3 到 6 个字符', trigger: 'blur' },
    ],
})
//声明自定义属性
const ruleFormRef = ref<FormInstance>()
//编程是路由
const router = useRouter()
//使用pinia
const loginUserData = loginUserStore()
//登录按钮

const LoginUserGet = async (formEl: FormInstance | undefined) => {
    //验证
    if (!formEl) return
    await formEl.validate(async (valid, fields) => {
        if (valid) {
            //发送请求
            const { data } = await myaxios.post('/login', userData)
            // console.log(data);
            if (data.meta.status == 400) {
                ElMessage({
                    message: '登陆失败哦',
                    type: 'error',
                })
            } else if (data.meta.status == 200) {
                ElMessage({
                    message: '登陆成功！',
                    type: 'success',
                })
                //登录成功跳转到home
                router.push({ path: "/home" });
                //存储登录状态
                localStorage.setItem('userinfo', JSON.stringify(data.data))
                //
                loginUserData.addToken()
            } else {
                ElMessage({
                    message: '密码错误哦',
                    type: 'error',
                })
            }
        } else {
            console.log('error submit!', fields)
        }
    })

}

</script>

<style>
.el-form-item {
    width: 30vw;
}
.el-form {
    width: 500px;
    margin: 0 auto;
}
.loginBox {
    margin: 0 auto;
}
.demo-type > span {
    display: block;
    margin: 15px auto;
}
</style>